<template>
  <div class="login-box">
      <div>
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off" v-model="username">
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" name="password" id="password" placeholder="请输入密码" v-model="password">
      </div>
      <div>
          <button @click="register()">注册</button>
          <a href="login">去登录</a>
      </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from "vue";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    props: {

    },
    setup(props) {
        let username = ref(username);
        let password = ref(password);
        const register = async () => {
            let result = await axios.post('http://localhost:3000/api/v1/register',{
                username: username.value,
                password: password.value
            });
            console.log(result);
            if(result.status === 200 && result.data.code === 200){
                console.log('注册成功');
            }
        };
        return {
            username,
            password,
            register
        }
    }

}
</script>

<style lang="scss">
.login-box {
    display: inline-block;

    label {
        text-align: start;
        display: inline-block;
        width: 50px;
    }

    & > div:last-of-type {
        display: flex;
        justify-content: space-between;
    }
}
</style>